﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:Nok_Air"
    xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls" 
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    x:Class="Nok_Air.MainPage"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
    d:DataContext="/SampleData/MainViewModelSampleData.xaml"
    SupportedOrientations="Portrait"  Orientation="Portrait"

    shell:SystemTray.IsVisible="False" Loaded="PhoneApplicationPage_Loaded" FontFamily="/Nok Air;component/Fonts/Fonts.zip#PSL Display">
    <phone:PhoneApplicationPage.Resources>

        <Style x:Key="MenuButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Height="68" Width="400">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <LinearGradientBrush.RelativeTransform>
                                        <MatrixTransform/>
                                    </LinearGradientBrush.RelativeTransform>
                                    <GradientStop Color="#FFFFCF00" Offset="1"/>
                                    <GradientStop Color="#FFFFF9DF" Offset="0.428"/>
                                    <GradientStop Color="White"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="0.572" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="-1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="arrowbutton" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid Width="405" Height="64">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="65"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="45"/>
                                    </Grid.ColumnDefinitions>
                                    <Image x:Name="menuicon" Source="{Binding MenuIcon}" Width="45" Margin="10" VerticalAlignment="Center" HorizontalAlignment="Left" d:LayoutOverrides="HorizontalAlignment"/>
                                    <TextBlock x:Name="menutitle" Text="{Binding MenuTitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Center" FontSize="48" Foreground="Black" FontFamily="/Nok Air;component/Fonts/Fonts.zip#PSL Display" Grid.Column="1" Margin="0"/>
                                    <Image x:Name="arrowbutton" Source="/Images/l_button.png" Grid.Column="2" Margin="0,0,12,0" RenderTransformOrigin="0.5,0.5">
                                        <Image.RenderTransform>
                                            <CompositeTransform/>
                                        </Image.RenderTransform>
                                    </Image>
                                </Grid>
                            </ContentControl>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="MenuListBoxStyle" TargetType="ListBox">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="InvalidUnfocused"/>
                                    <VisualState x:Name="InvalidFocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Resource dictionary entries should be defined here. -->
        <Style x:Key="PanoramaStyle" TargetType="controls:Panorama">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <controlsPrimitives:PanoramaPanel x:Name="panel"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:Panorama">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0"/>
                                <RowDefinition Height="5*"/>
                            </Grid.RowDefinitions>
                            <controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">
                                <Border x:Name="background" Background="{TemplateBinding Background}" CacheMode="BitmapCache"/>
                            </controlsPrimitives:PanningBackgroundLayer>
                            <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding TitleTemplate}" Grid.Row="0" VerticalAlignment="Bottom">
                                <ContentPresenter/>
                            </controlsPrimitives:PanningTitleLayer>
                            <controlsPrimitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
                                <ItemsPresenter x:Name="items"/>
                            </controlsPrimitives:PanningLayer>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="PanoramaItemStyle" TargetType="controls:PanoramaItem">
            <Setter Property="CacheMode" Value="BitmapCache"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:PanoramaItem">
                        <Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="Left" Margin="15,0,0,0" FontSize="53.333">
                                <ContentControl.RenderTransform>
                                    <TranslateTransform x:Name="headerTransform"/>
                                </ContentControl.RenderTransform>
                            </ContentControl>
                            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard x:Name="airplaneFly">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image">
                <EasingDoubleKeyFrame KeyTime="0" Value="-8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:5.4" Value="1012"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="image">
                <EasingDoubleKeyFrame KeyTime="0" Value="-160"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-162"/>
                <EasingDoubleKeyFrame KeyTime="0:0:5.4" Value="-332"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->

    <!--Panorama-based applications should not show an ApplicationBar-->

    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Panorama control-->
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <controls:Panorama x:Name="titlePano" Title="Nok Air" Style="{StaticResource PanoramaStyle}">
            <controls:Panorama.Background>
                <ImageBrush Stretch="Fill" ImageSource="/Images/Background/PanoramaBackground.png"/>
            </controls:Panorama.Background>
            <!--Panorama item one-->
            <controls:PanoramaItem x:Name="menuPano" Style="{StaticResource PanoramaItemStyle}" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}">
                <!--Double line list with text wrapping-->
                <StackPanel Width="420" Height="720">
                    <Grid Height="160">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.7*"/>
                            <RowDefinition Height="0.3*"/>
                        </Grid.RowDefinitions>
                        <Image Source="/Images/NokAirLogoYellowOnBlack.jpg" HorizontalAlignment="Left" Margin="0" Width="300" Height="110"/>
                        <TextBlock x:Name="menuPanoHeader" Text="Menu" FontSize="50.667" VerticalAlignment="Bottom" Grid.Row="1" Margin="20,0,0,0"/>
                    </Grid>
                    <Grid HorizontalAlignment="Center" Margin="0" >
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ListBox ItemsSource="{Binding MenuItem}" Style="{StaticResource MenuListBoxStyle}" FontFamily="/Nok Air;component/Fonts/Fonts.zip#PSL Display" Height="310">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Button  Margin="5" Style="{StaticResource MenuButtonStyle}" Click="Menu_Click" Tag="{Binding MenuTag}" BorderBrush="#99FFFFFF" BorderThickness="2">
                                        <Button.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFFCF00" Offset="1"/>
                                                <GradientStop Color="#FFFFF9DF" Offset="0.428"/>
                                                <GradientStop Color="White"/>
                                            </LinearGradientBrush>
                                        </Button.Background>
                                        <Border BorderThickness="2" BorderBrush="#99FFFFFF" Width="405">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFFFCF00" Offset="1"/>
                                                    <GradientStop Color="#FFFFF9DF" Offset="0.428"/>
                                                    <GradientStop Color="White"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                            <Grid Height="64">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="65"/>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition Width="45"/>
                                                </Grid.ColumnDefinitions>
                                                <Image Source="{Binding MenuIcon}" Width="45" Margin="10" VerticalAlignment="Center" HorizontalAlignment="Left" d:LayoutOverrides="HorizontalAlignment"/>
                                                <TextBlock Text="{Binding MenuTitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Center" FontSize="48" Foreground="Black" FontFamily="/Nok Air;component/Fonts/Fonts.zip#PSL Display" Grid.Column="1" Margin="0"/>
                                                <Image Source="/Images/l_button.png" Grid.Column="2" Margin="0,0,12,0"/>
                                                <Path Data="M2,0 L10,10 L2,20 L0,17.5 L6,10 L0,2.5 z" Stretch="Fill" UseLayoutRounding="False" StrokeThickness="2" Fill="#CCFFFFFF" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Stroke="#59000000" Visibility="Collapsed"/>
                                            </Grid>
                                        </Border>
                                    </Button>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                        <Border BorderThickness="3" CornerRadius="10" d:LayoutOverrides="Width" Grid.Row="1" Padding="5" Background="White" Margin="0,20,0,0" >
                            <Image x:Name="imagePromotion" Source="/Images/Promotion.jpg" MinWidth="400" MaxWidth="400" Width="400" MaxHeight="200"/>
                        </Border>
                    </Grid>
                    <!--Double line list with text wrapping-->

                </StackPanel>

            </controls:PanoramaItem>

            <!--Panorama item two-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem x:Name="airportPano" Style="{StaticResource PanoramaItemStyle}" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}">
                <!--Double line list with image placeholder and text wrapping-->
                <StackPanel>
                    <!--Double line list with image placeholder and text wrapping-->
                    <Grid Height="160">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.7*"/>
                            <RowDefinition Height="0.3*"/>
                        </Grid.RowDefinitions>
                        <Image Source="/Images/logo nok white.png" HorizontalAlignment="Left" Margin="20,0,0,0" Width="300" Height="70"/>
                        <TextBlock x:Name="airportHeader" Text="Airport" FontSize="50.667" VerticalAlignment="Bottom" Grid.Row="1" Margin="20,0,0,0"/>
                    </Grid>
                    <!--Double line list with image placeholder and text wrapping-->
                    <ListBox ItemsSource="{Binding AirportItems}" x:Name="airPortListBox" SelectionChanged="airPortListBox_SelectionChanged" Height="555" >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Margin="0,0,0,15">
                                    <!--Replace rectangle with image-->
                                    <Border HorizontalAlignment="Center" Height="118" Margin="0" VerticalAlignment="Center" Width="118" Padding="5" Background="#CDFFFFFF" CornerRadius="6">
                                        <Image Source="{Binding AirPortIcon}" Margin="0"/>
                                    </Border>
                                    <Grid Width="300" Margin="0,0,0,-5">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <TextBlock Text="{Binding AirPortName}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="Black" FontSize="48" FontFamily="/Nok Air;component/Fonts/Fonts.zip#PSL Display" Margin="5,5,0,-8" LineStackingStrategy="BlockLineHeight" LineHeight="40" VerticalAlignment="Center"/>
                                        <TextBlock Text="{Binding AirPortLocation}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="#CC000000" FontSize="37.333" FontFamily="/Nok Air;component/Fonts/Fonts.zip#PSL Display" d:LayoutOverrides="Height" Grid.Row="1" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </controls:PanoramaItem>
        </controls:Panorama>
        <local:AppBarMenuUserControl x:Name="appbar" isFirstPage="True" Tag="FirstPage" Grid.Row="1"/>
        <Image x:Name="image" Source="/Images/Background/MainPageAirplane.png" Width="180" Margin="-970,0,0,0" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
    </Grid>

</phone:PhoneApplicationPage>